<template>
  <div style="min-height: 100vh; background: linear-gradient(to bottom right, #ecfeff, #f0fdfa); display: flex; align-items: center; justify-content: center;">
    <div style="width: 1440px; min-height: 1024px; margin: 0 auto; padding: 0 1rem; display: flex; align-items: center; justify-content: space-between;">
      <!-- 左侧插画区域 -->
      <div class="flex-1 relative h-full">
        <div class="w-full h-full overflow-hidden">
          <img :src="heroImage" alt="碳中和资产管理平台" class="w-full h-full object-cover object-top">
        </div>
      </div>
      <!-- 右侧登录区域 -->
      <div style="width: 530px; background: white; border-radius: 0.5rem; box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1); padding: 2.5rem; display: flex; flex-direction: column; justify-content: center;">
        <div style="text-align: center; margin-bottom: 1rem;">
          <h1 style="font-size: 0.5rem; font-weight: bold; color: #10b981; margin-bottom: 0.5rem;">碳中和资产管理平台</h1>
          <p style="color: #10b981; font-size: 0.25rem;">XCARBON MANAGEMENT PLATFORM</p>
        </div>
        <form @submit.prevent="handleLogin" class="space-y-6">
          <div class="space-y-2">
            <div class="relative">
              <el-input
                v-model="formData.accountName"
                :placeholder="'请输入用户名'"
                class="w-full !rounded-button"
                size="large"
              >
                <template #prefix>
                  <i class="el-icon-user text-gray-400"></i>
                </template>
              </el-input>
            </div>
            <br>
            <div class="relative">
              <el-input
                v-model="formData.password"
                type="password"
                :placeholder="'请输入密码'"
                class="w-full !rounded-button"
                size="large"
              >
                <template #prefix>
                  <i class="el-icon-lock text-gray-400"></i>
                </template>
              </el-input>
            </div>
          </div>
          <div class="flex items-center justify-between">
            <el-checkbox v-model="rememberMe" class="text-gray-600">记住我</el-checkbox>
          </div>
          <el-button
            type="success"
            class="w-full !rounded-button whitespace-nowrap"
            size="large"
            @click="handleLogin"
          >
            登录
          </el-button>
          <div class=" text-sm text-gray-600">
            还没有账号？
            <a href="/reg" class="text-emerald-600 hover:text-emerald-500">立即注册&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
            <a href="/forgetPassWord" class="text-sm text-emerald-600 hover:text-emerald-500">忘记密码？</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import request from '@/utils/request'; 
import store from '@/store';
export default {
  data() {
    return {
      formData:{
      accountName: '',
      password: ''
      },
      rememberMe: false,
      heroImage: 'https://ai-public.mastergo.com/ai/img_res/845c927711014363f13777cd90d453e9.jpg'
    }
  },
  methods: {
    async handleLogin() {
      
  if (!this.formData.accountName || !this.formData.password) {
    this.$message.warning('请输入用户名和密码');
    return;
  }
  
  this.$request.post('/authCenter/auth/login', this.formData)
    .then(res => {
       console.log('完整响应：', res); 
      if (res.code === 200) {
        console.log('token',res.data.token)
           this.$message.success(res.msg || '登录成功')
           const token = res.data.token; 
            localStorage.setItem('token',token)
            localStorage.setItem('user',JSON.stringify(res.data.securityData))
            console.log("1212",localStorage)
            this.$router.push('/dashboard') 
          } else{
            this.$message.error(res.msg);
          }
    });
   
    } 
    }

};
</script>

<style scoped>
.login-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.error-message {
  color: red;
  margin-top: 10px;
}
</style>